import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import '../styles/splash.scss'

const SplashScreen: React.FC = () => {
  const [animationComplete, setAnimationComplete] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    // 延迟后自动跳转到主页
    const timer = setTimeout(() => {
      setAnimationComplete(true);
      setTimeout(() => {
        navigate('/home');
      }, 500)
    }, 3000)

    return () => {
      clearTimeout(timer);
    }
  }, [navigate])

  // 点击"立即体验"按钮
  const handleExperience = () => {
    setAnimationComplete(true);
    setTimeout(() => {
      navigate('/home');
    }, 300)
  }
  
  return (
    <div className={`splash-container ${animationComplete ? 'fade-out' : ''}`}>
      <div className="splash-content">
        <div className="logo-container">
          <div className="heart-rate-icon">
            <div className="heart"></div>
            <div className="ecg-line"></div>
          </div>
        </div>

        <h1 className="app-title">医预通</h1>

        <div className="app-slogan">
          <p>健康的线上预约挂号平台</p>
        </div>

        <button className="experience-btn" onClick={handleExperience}>
          立即体验
        </button>
      </div>
    </div>
  )
}

export default SplashScreen;